import classNames from 'classnames'
import { FC } from 'react'

import './RiskRankingTabItem.less'

export type Option = {
  label: string
  value: string | number
}

export type RiskRankingTabItemProps = {
  label: string
  value: string | number
  activeTabValue?: string | number
  onChange?: (value: string | number, option: Option) => void
}

const RiskRankingTabItem: FC<RiskRankingTabItemProps> = ({
  label,
  value,
  activeTabValue,
  onChange
}) => {
  const clickHandler = () => {
    onChange?.(value, { label, value })
  }

  return (
    <div
      style={{
        height: 58,
        flex: '0 0 50%'
      }}
    >
      <div
        className={classNames('risk-ranking-tab-item', {
          active: activeTabValue === value
        })}
        onClick={clickHandler}
      >
        {label}
      </div>
    </div>
  )
}

export default RiskRankingTabItem
